<!-- 中台 -->
<template>
  <div>
    <span v-for="(item, index) in menus" :key="item.label">
      <span v-if="index !== 0"> | </span>
      <router-link :to="item.path">
        <span class="menu-title">{{ item.label }}</span>
      </router-link>
    </span>
  </div>
</template>

<script>
export default {
  name: 'Menu-Page',
  data () {
    return {
      menus: [
        {
          label: '子应用1首页',
          path: '/vue1/home'
        }, {
          label: '子应用1关于',
          path: '/vue1/about'
        }, {
          label: '子应用2首页',
          path: '/vue2/home'
        }, {
          label: '子应用2关于',
          path: '/vue2/about'
        }
      ]
    }
  },
  methods: {
    goPath (path) {
      if (process.env.NODE_ENV === 'development') {
        this.$router.push(path)
      } else {
        window.history.pushState({}, '', path)
      }
    }
  }
}
</script>

<style>
.menu-title {
  color: rgb(101, 103, 220);
  cursor: pointer;
  font-size: 16px;
}
</style>